import React, { memo, useState } from "react";
import { NavLink } from "react-router-dom";
import { RankLeftStyle } from "./style";
import { getSizeImage } from "@/utils/format-utils";
import classNames from "classnames";

export default memo(function RankLeft(props) {
  return (
    <RankLeftStyle>
      <div>
        <h2 className="cloud-music">
          {props.num === 4 ? "云音乐特色榜" : "全球媒体榜"}
        </h2>
        <ul>
          {props.num === 4
            ? props.topLists.slice(0, 4).map((item, index) => {
                const isSelect = props.propsId == item.id;
                return (
                  <li
                    className={classNames({ isSelect: isSelect })}
                    onClick={(e) => props.setNumber(item.id)}
                    key={item.id}
                  >
                    <NavLink
                      to={{
                        pathname: "/discover/ranking",
                        search: "?id=" + item.id,
                      }}
                      className="rankBox"
                    >
                      <div className="flex-box">
                        <img src={getSizeImage(item.coverImgUrl, 40)} alt="" />
                        <div className="text-box">
                          <span>{item.name}</span>
                          <span className="updateTimeSpan">
                            {item.updateFrequency}
                          </span>
                        </div>
                      </div>
                    </NavLink>
                  </li>
                );
              })
            : props.topLists.slice(5).map((item, index) => {
                const isSelect = props.propsId == item.id;
                return (
                  <li
                    className={classNames({ isSelect: isSelect })}
                    onClick={(e) => props.setNumber(item.id)}
                    key={item.id}
                  >
                    <NavLink
                      to={{
                        pathname: "/discover/ranking",
                        search: "?id=" + item.id,
                      }}
                      className="rankBox"
                    >
                      <div className="flex-box">
                        <img src={getSizeImage(item.coverImgUrl, 40)} alt="" />
                        <div className="text-box">
                          <span>{item.name}</span>
                          <span className="updateTimeSpan">
                            {item.updateFrequency}
                          </span>
                        </div>
                      </div>
                    </NavLink>
                  </li>
                );
              })}
        </ul>
      </div>
    </RankLeftStyle>
  );
});
